<template>
  <div class="back">
    <div class="title">
      <div class="head1">
        <div class="img">
          <van-uploader
            class="per_up_img"
            :max-count="1"
            v-model="fileList"
            :after-read="afterRead"
          />
        </div>
        <span>{{userInfo.username}}</span>

        <van-icon class="per_icon" size="20" name="more-o" />
      </div>
    </div>
    <div class="vip"></div>
    <div class="myorder"></div>
    <div class="personal_daishou">
      <PersonalDaishou></PersonalDaishou>
    </div>
    <div class="myserve">
      <div class="serve"><p>我的服务</p></div>
      <div class="service">
        <van-grid :gutter="10" icon-size="20" :column-num="3" center>
          <van-grid-item
            icon="location-o"
            to="/index/address"
            text="地址管理"
          />
          <van-grid-item icon="completed" text="签到领积分" />
          <van-grid-item icon="balance-list-o" text="邀请有礼" />
          <van-grid-item icon="edit" to="/index/editregister" text="修改密码" />
          <van-grid-item icon="balance-pay" text="优惠券" />
          <van-grid-item icon="setting-o" to="/index/signout" text="设置" />
        </van-grid>
      </div>
    </div>

    <div></div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { RegUpImg, EditRegPwd } from "@/network/register/register.js";
import PersonalDaishou from "../components/PersonalCenter/PersonalDaishou.vue";
export default {
  data() {
    return {
      fileList: [{ url: "https://img01.yzcdn.cn/vant/cat.jpeg" }],
      userInfo: {
        imgurl: "",
        username:''
      },
    };
  },
  activated() {
    this.userInfo = this.$store.state.userInfo;
    this.fileList[0].url ="http://101.200.88.248:8044/"+this.$store.state.userInfo.imgurl;
  },
  methods: {
    //修改用户头像
    async afterRead(file) {
      let formData = new FormData();
      formData.append("file", file.file);
      const { data: res } = await RegUpImg(formData);
      //console.log(res);
      //上传失败
      if (!res.Success) {
        setTimeout(() => {
          file.status = "failed";
          file.message = "上传失败";
        }, 1000);
      } else {
        this.userInfo.imgurl = res.SaveName;
        const res2 = await EditRegPwd({ data: JSON.stringify(this.userInfo) });
        if (res2.data.message == "success") {
          Toast.success("修改成功");
        }
      }
    },
  },
  components: {
    PersonalDaishou,
  },
};
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
@import "../assets/css/index.less";
* {
  margin: 0 * @vw;
  padding: 0 * @vw;
}
.icon_item {
  margin-left: 140 * @vw;
}
.per_up_img {
  margin-top: 60 * @vw;
  margin-left: 60 * @vw;
  border-radius: 120*@vw;
}

.back {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #f5f5f5;

  .title {
    width: 100%;
    height: 363 * @vw;
    margin-bottom: 70 * @vw;
    .head1 {
      display: flex;
      .img {
      
      }
      span {
        width: 800 * @vw;
        margin-top: 170 * @vw;
        margin-left: 120 * @vw;
        font-size: 5.5vw;
      }
      .per_icon {
        margin-top: 70 * @vw;
      }
    }
  }

  .vip {
    width: 1385 * @vw;
    height: 1014 * @vw;
    background-image: url(../assets/vip.jpg);
    background-size: 1385 * @vw 1014 * @vw;
    margin: 0 * @vw auto;
  }

  .myorder {
    width: 1385 * @vw;
    height: 142 * @vw;
    background-image: url(../assets/myorder.jpg);
    background-size: 1385 * @vw 142 * @vw;
    margin: 0 * @vw auto;
  }
  .personal_daishou {
    margin-bottom: 40 * @vw;
  }
  .myserve {
    width: 1385 * @vw;
    background-color: #ffffff;
    margin: 0 * @vw auto;
    border-radius: 20 * @vw;
    .serve {
      width: 1385 * @vw;
      height: 197 * @vw;
      text-align: left;
      line-height: 197 * @vw;
      p {
        margin-left: 50 * @vw;
      }
    }
    .service {
      display: flex;

      .service-icon {
      }
    }
  }
}
</style>